<template>
  <div class="announcement-container">
    <div class="announcement-header card-shadow">
      <h1 class="page-title">平台公告</h1>
      <div class="announcement-filter">
        <el-radio-group v-model="filterType" size="large">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="important">重要通知</el-radio-button>
          <el-radio-button label="normal">一般公告</el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <div class="announcement-list">
      <div 
        v-for="(notice, index) in filteredAnnouncements" 
        :key="index"
        class="announcement-item card-shadow"
        :class="{ 'important': notice.type === 'primary' }"
      >
        <div class="announcement-badge" :class="getBadgeClass(notice.type)">
          <el-icon v-if="notice.type === 'primary'"><Warning /></el-icon>
          <el-icon v-else-if="notice.type === 'success'"><CircleCheck /></el-icon>
          <el-icon v-else><InfoFilled /></el-icon>
        </div>
        <div class="announcement-content">
          <div class="announcement-meta">
            <span class="announcement-date">{{ notice.timestamp }}</span>
            <el-tag 
              :type="getTagType(notice.type)" 
              effect="light" 
              size="small"
            >
              {{ getTagText(notice.type) }}
            </el-tag>
          </div>
          <h3 class="announcement-title">{{ notice.title }}</h3>
          <div class="announcement-text">{{ notice.content }}</div>
          <div class="announcement-footer" v-if="notice.attachments && notice.attachments.length > 0">
            <div class="attachment-list">
              <div v-for="(attachment, idx) in notice.attachments" :key="idx" class="attachment-item">
                <el-icon><Document /></el-icon>
                <span>{{ attachment.name }}</span>
                <el-button link type="primary" size="small">下载</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="pagination-container card-shadow">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Warning, InfoFilled, CircleCheck, Document } from '@element-plus/icons-vue'

// 筛选类型
const filterType = ref('all')

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(25)

// 模拟公告数据
const announcements = [
  {
    id: 1,
    title: '关于加强失物招领信息审核的通知',
    content: '为提高平台信息质量，保障用户体验，平台将从2024年4月1日起，对所有失物招领信息进行严格审核。请各位用户发布信息时，务必提供清晰的物品照片和详细的描述信息，以加快审核流程。特此通知。',
    timestamp: '2024-03-15',
    type: 'primary',
    attachments: [
      { name: '失物招领信息审核标准.pdf', url: '#' }
    ]
  },
  {
    id: 2,
    title: '寒假期间失物招领处理办法',
    content: '寒假期间（2024年1月15日至2024年2月28日），平台将继续提供线上失物招领服务。由于校园工作人员有限，线下物品交接可能会有延迟，请各位用户理解。建议寒假期间丢失或拾获贵重物品的用户，可联系平台客服获取帮助。',
    timestamp: '2024-03-10',
    type: 'info'
  },
  {
    id: 3,
    title: '2024年春季学期失物招领工作安排',
    content: '2024年春季学期开始，平台将在各主要教学楼、图书馆、食堂等区域设置失物招领临时点。同时，我们招募了新一批失物招领志愿者，将为大家提供更加便捷的服务。欢迎有意向加入志愿者团队的同学联系我们。',
    timestamp: '2024-03-01',
    type: 'success'
  },
  {
    id: 4,
    title: '平台功能更新公告',
    content: '为提升用户体验，平台于近期进行了功能更新：1. 新增物品智能匹配功能；2. 优化了消息通知系统；3. 增加了物品地理位置标记功能。欢迎大家体验新功能并提供宝贵意见。',
    timestamp: '2024-02-25',
    type: 'info',
    attachments: [
      { name: '功能使用指南.pdf', url: '#' },
      { name: '常见问题解答.docx', url: '#' }
    ]
  },
  {
    id: 5,
    title: '关于防范招领诈骗的重要提醒',
    content: '近期有用户反映，有不法分子以归还物品为由，要求失主支付不合理费用或提供个人敏感信息。平台在此郑重提醒：1. 平台不会收取任何费用；2. 不要轻易透露个人敏感信息；3. 遇到可疑情况请立即联系平台客服或校园保卫处。',
    timestamp: '2024-02-20',
    type: 'primary'
  }
]

// 根据筛选条件过滤公告
const filteredAnnouncements = computed(() => {
  if (filterType.value === 'all') {
    return announcements
  } else if (filterType.value === 'important') {
    return announcements.filter(item => item.type === 'primary')
  } else {
    return announcements.filter(item => item.type !== 'primary')
  }
})

// 获取标签类型
const getTagType = (type: string) => {
  switch (type) {
    case 'primary': return 'danger'
    case 'success': return 'success'
    default: return 'info'
  }
}

// 获取标签文本
const getTagText = (type: string) => {
  switch (type) {
    case 'primary': return '重要'
    case 'success': return '活动'
    default: return '通知'
  }
}

// 获取徽章类
const getBadgeClass = (type: string) => {
  switch (type) {
    case 'primary': return 'badge-important'
    case 'success': return 'badge-success'
    default: return 'badge-info'
  }
}

// 分页相关
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style scoped lang="scss">
.announcement-container {
  max-width: 1200px;
  min-width: $min-width;
  margin: 0 auto;
  padding: $spacing-huge;
  animation: fadeIn 0.6s ease;
  
  @media (max-width: 768px) {
    padding: $spacing-base;
  }
}

.announcement-header {
  background: white;
  border-radius: $border-radius-large;
  padding: $spacing-large $spacing-huge;
  margin-bottom: $spacing-huge;
  @include flex-between;
  box-shadow: $card-shadow;

  .page-title {
    font-size: 28px;
    background: $primary-gradient;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    
    @media (max-width: 768px) {
      font-size: 24px;
    }
  }

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    gap: $spacing-base;
    padding: $spacing-base;
    margin-bottom: $spacing-large;
  }
}

.announcement-list {
  display: flex;
  flex-direction: column;
  gap: $spacing-large;
  margin-bottom: $spacing-huge;
  
  @media (max-width: 768px) {
    gap: $spacing-base;
    margin-bottom: $spacing-large;
  }
}

.announcement-item {
  position: relative;
  background: white;
  border-radius: $border-radius-large;
  overflow: hidden;
  box-shadow: $card-shadow;
  transition: $transition-base;
  display: flex;
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: $hover-shadow;
  }
  
  &.important {
    border-left: 4px solid var(--el-color-danger);
  }
  
  @media (max-width: 576px) {
    flex-direction: column;
    
    &.important {
      border-left: none;
      border-top: 4px solid var(--el-color-danger);
    }
  }
}

.announcement-badge {
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .el-icon {
    font-size: 24px;
    color: white;
  }
  
  &.badge-important {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  }
  
  &.badge-success {
    background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
  }
  
  &.badge-info {
    background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
  }
  
  @media (max-width: 576px) {
    width: 100%;
    height: 40px;
  }
}

.announcement-content {
  flex: 1;
  padding: $spacing-large;
  
  @media (max-width: 768px) {
    padding: $spacing-base;
  }
}

.announcement-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $spacing-small;
  
  @media (max-width: 576px) {
    flex-direction: column;
    align-items: flex-start;
    gap: $spacing-mini;
  }
}

.announcement-date {
  color: $text-secondary;
  font-size: 14px;
}

.announcement-title {
  font-size: 18px;
  font-weight: 600;
  color: $text-primary;
  margin: $spacing-small 0;
  
  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.announcement-text {
  color: $text-regular;
  line-height: 1.8;
  margin-bottom: $spacing-base;
  white-space: pre-line;
  
  @media (max-width: 768px) {
    font-size: 14px;
    line-height: 1.6;
  }
}

.announcement-footer {
  margin-top: $spacing-large;
  padding-top: $spacing-base;
  border-top: 1px dashed $border-lighter;
  
  @media (max-width: 768px) {
    margin-top: $spacing-base;
  }
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: $spacing-small;
}

.attachment-item {
  display: flex;
  align-items: center;
  background: $background-color;
  padding: $spacing-small $spacing-base;
  border-radius: $border-radius-base;
  
  .el-icon {
    margin-right: $spacing-small;
    color: $text-secondary;
  }
  
  span {
    flex: 1;
    font-size: 14px;
    color: $text-regular;
    @include text-overflow;
  }
  
  @media (max-width: 576px) {
    padding: $spacing-mini $spacing-small;
    
    span {
      font-size: 12px;
    }
  }
}

.pagination-container {
  background: white;
  border-radius: $border-radius-large;
  padding: $spacing-large;
  @include flex-center;
  box-shadow: $card-shadow;
  
  @media (max-width: 768px) {
    padding: $spacing-base;
    
    :deep(.el-pagination) {
      flex-wrap: wrap;
      justify-content: center;
      row-gap: $spacing-small;
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 